<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">


<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/organization/thesame.css" media="all">
    <link rel="stylesheet" href="../static/css/staff/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/css/staff/css/page.css" media="all">
    <style>
    </style>
</head>


<script>
    var isCURD = false;
</script>
<shiro:hasPermission name="yuangongguanli_cud">
    <script>
        isCURD = true;
    </script>
</shiro:hasPermission>

<body class="layui-layout-body">
<div class="layui-body">
    <div class="scroll-box bgWhite box-shadows border-radius4">
        <div class="scroll-box-con">
            <div class="mar25px">
                <div class="mb25px more-date border-bot1px">
                    <div class="add-mess-flex ">
                        <div class="add-mess-child">
                            <div>
                                <label>姓名：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="staffName" autocomplete="off" value="" maxlength="20" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>身份证号：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="idCard" autocomplete="off" maxlength="18" value="" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>电话号码：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="phone" autocomplete="off" value="" maxlength="11" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="add-mess-flex">
                        <div class="add-mess-child">
                            <div>
                                <label>年龄：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="age" autocomplete="off" value="" maxlength="3" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>职称：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="positional" autocomplete="off" value="" maxlength="20" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>岗位：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input id="post" autocomplete="off" value="" maxlength="20" type="text" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="add-mess-flex">
                        <div class="add-mess-child">
                            <div>
                                <label>性别：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <select name="" id="sex" class="form-select">
                                        <option value="">全部</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>学历：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <select id="education" class="form-select">
                                        <option value="">全部</option>
                                        <option value="2101">文盲</option>
                                        <option value="2102">小学</option>
                                        <option value="2103">初中</option>
                                        <option value="2104">中专</option>
                                        <option value="2105">高中</option>
                                        <option value="2106">本科</option>
                                        <option value="2107">硕士</option>
                                        <option value="2108">博士</option>
                                    </select>
                                </p>
                            </div>
                        </div>
                        <div class="add-mess-child">
                            <div>
                                <label>进院时间：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <input type="text" autocomplete="off" value="" id="inDate" placeholder="请输入" class="layui-time test-item">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="add-mess-flex">
                        <div class="add-mess-child">
                            <div>
                                <label>年龄标签：</label>
                            </div>
                            <div class="add-mess-form">
                                <p>
                                    <select id="agelabal" class="form-select">
                                        <option value="">全部</option>
                                        <option value="0">35岁以下</option>
                                        <option value="1">36-45岁</option>
                                        <option value="2">46岁以上</option>
                                    </select>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="pt15px pb15px textRight">
                        <p class="layui-btn" id="serchBtn">查&nbsp;询</p>
                        <p class="layui-btn layui-btn-primary" id="reset">重&nbsp;置</p>
                        <p class="green cursor right lh32px ml25px btn-select"><span>展开</span><img src="../static/css/staff/img/select_icon_down.png" class="ml10px"></p>
                    </div>
                </div>
                <div class="pb50px">
                    <div class="lh32px mb20px overflow add-btn-input">
                        <p class="left cursor">
                            <shiro:hasPermission name="yuangongguanli_cud">
                                <span class="white border-radius4 bgGreen inline-block pl15px pr15px" onclick="addStaff()"><img src="../static/css/staff/img/button_add.png">新建</span>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="yuangongguanli_exp">
                            <span class="white border-radius4 bgGreen inline-block pl15px pr15px mr25px ml25px" onclick="exportExcel()">
                                <img src="../static/css/staff/img/icon_daochu.png">导出
                            </span>
                            </shiro:hasPermission>
                        </p>
                        <p class="right">
                            <span>共有<em class="red fb ml5px mr5px" id="count"></em>人</span>
                        </p>
                    </div>
                    <div class="border1px border-radius4 relative table-time">
                        <table class="layui-hide" id="test1" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../static/js/jquery-2.1.3.min.js" charset="utf-8"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script src="../static/css/staff/js/treeTwo.js"></script>
<script>


    $(function () {
        getData();

        $("#serchBtn").click(function () {
            getData();
        });

        $("#reset").click(function () {
            $("#staffName").val("");
            $("#idCard").val("");
            $("#sex").val("");
            $("#age").val("");
            $("#positional").val("");
            $("#post").val("");
            $("#education").val("");
            $("#phone").val("");
            $("#inDate").val("");
            $("#agelabal").val("");
            getData();
        });

        $('.more-date div.add-mess-flex:gt(1)').hide();
        $('.btn-select').click(function () {
            if ($(this).find('img').attr('src') == '../static/css/staff/img/select_icon_down.png') {
                $(this).find('img').attr('src', '../static/css/staff/img/select_icon_up.png').siblings("span").text("收起");

            } else {
                $(this).find('img').attr('src', '../static/css/staff/img/select_icon_down.png').siblings("span").text("展开");

            }
            $('.more-date div.add-mess-flex:gt(1)').slideToggle(300);
        });

    });

    function getData() {
        layui.use(['element', 'laydate', 'table'], function () {
            var element = layui.element;
            var laydate = layui.laydate;
            var table = layui.table;
            var staffName = $("#staffName").val();
            var idCard = $("#idCard").val();
            var sex = $("#sex").val();
            var age = $("#age").val();
            var positional = $("#positional").val();
            var post = $("#post").val();
            var education = $("#education").val();
            var phone = $("#phone").val();
            var inDate = $("#inDate").val();
            var agelabal = $("#agelabal").val();
            laydate.render({
                elem: '.test-item',
                trigger: 'click',
            });
            //第一个实例
            table.render({
                elem: '#test1'
                , url: "../staff/getStaffInfoList"
                , where: {
                    staffName: staffName, idCard: idCard, sex: sex, age: age, agelabal: agelabal,
                    positional: positional, post: post, education: education, phone: phone, inDate: inDate
                }
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // , toolbar: true
                // , defaultToolbar: []
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.list,
                        "count": res.data.total,
                        "limit": res.data.pageSize,
                    };
                },
                cols: [
                    [ //表头
                        {
                            title: '序号',
                            fixed: 'left',
                            type: 'numbers',
                            width: 70,
                        }, {
                        field: 'staffName',
                        title: '姓名',
                    }, {
                        field: 'education',
                        title: '学历',
                    }, {
                        field: 'phone',
                        title: '电话号码',
                    }, {
                        field: 'age',
                        title: '年龄',
                    }, {
                        field: 'positional',
                        title: '职称',
                    }, {
                        field: 'inDate',
                        title: '进院时间',
                    }, {
                        field: 'city',
                        title: '年龄标签',
                        templet: function (res) {

                            if (res.age <= 35) {
                                return "<div class='table-list-age'><span class='span-bgBlue'>35岁以下</span></div>"
                            } else if (res.age > 35 && res.age < 46) {
                                return "<div class='table-list-age'><span class='span-bgGreen'>36-45岁</span></div>"
                            } else if (res.age > 45) {
                                return "<div class='table-list-age'><span class='span-bgYellow'>45岁以上</span></div>"
                            }
                            console.log(res);
                            //蓝色背景span-bgBlue
                            //绿色背景span-bgGreen
                            //黄色背景span-bgYellow
                        }

                    }, {
                        field: 'city',
                        title: '操作',
                        style: 'color:#1C9399;',
                        fixed: 'right',
                        width: 140,
                        templet: function (res) {
                            if (isCURD) {
                                return "<div class='table-list-btn cursor'><span onclick=\"editById('" + res.staffNo + "')\">编辑</span>|<span class='cursor' onclick=\"deleteById('" + res.staffNo + "')\">删除</span></div>"
                            } else {
                                return "<div class='table-list-btn cursor'><span style=\"color: #eee; class=\"cursor\">编辑</span>|<span style=\"color: #eee; class=\"cursor\">删除</span></div>"
                            }
                        }

                    }]
                ], done: function (res, curr, count) {
                    $("#count").text(count);
                }
            });
        });
    }

    function editById(staffNo) {
        window.location.href = "../staff/toStaffInfoAddPage?staffNo=" + staffNo;
    }

    function exportExcel() {

        var staffName = $("#staffName").val();
        var idCard = $("#idCard").val();
        var sex = $("#sex").val();
        var age = $("#age").val();
        var positional = $("#positional").val();
        var post = $("#post").val();
        var education = $("#education").val();
        var phone = $("#phone").val();
        var inDate = $("#inDate").val();
        var agelabal = $("#agelabal").val();

        layer.confirm('是否导出所有员工信息', {
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll();
            window.location.href = "../staff/exportExcel?staffName=" + staffName + "&idCard=" + idCard
                + "&sex=" + sex + "&age=" + age + "&agelabal=" + agelabal
                + "&positional=" + positional + "&post=" + post + "&education="
                + education + "&phone=" + phone + "&inDate=" + inDate;
        });
    }

    function deleteById(staffNo) {
        var data = {staffNo: staffNo};
        layer.confirm('是否删除该信息', {
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll();
            $.ajax({
                url: "../staff/deleteById",
                type: "delete",
                async: false,
                dataType: "json",
                data: data,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg);
                        getData();
                    } else if (result.code == 101) {
                        layer.msg(result.msg);
                    }
                }
            })
        });
    }

    function addStaff() {
        window.location.href = "../staff/toStaffInfoAddPage";
    }


</script>
</body>

</html>
